<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
	<title>Imx - Form Wizard</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
    <!-- bootstrap -->
    <link href="/assets/css/bootstrap/bootstrap.css" rel="stylesheet" />
    <link href="/assets/css/bootstrap/bootstrap-overrides.css" type="text/css" rel="stylesheet" />

    <!-- libraries -->
    <link href="/assets/css/lib/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/lib/font-awesome.css" type="text/css" rel="stylesheet" />

    <!-- global styles -->
    <link rel="stylesheet" type="text/css" href="/assets/css/compiled/layout.css" />
    <link rel="stylesheet" type="text/css" href="/assets/css/compiled/elements.css" />
    <link rel="stylesheet" type="text/css" href="/assets/css/compiled/icons.css" />
    
    <!-- this page specific styles -->
    <link rel="stylesheet" href="/assets/css/compiled/form-wizard.css" type="text/css" media="screen" />

    <link rel="stylesheet" href="/assets/css/summernote/css/font-awesome.min.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/assets/css/summernote/summernote.css">

    <!-- open sans font -->
    <!-- <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css' /> -->

    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>

    <%@ include file="navbar.jsp" %>
    <%@ include file="sidebar-nav.jsp" %>
    
	<!-- main container -->
    <div class="content">
        <div id="pad-wrapper" style="font-size: 1em;">
            <div class="row">
                <div class="col-md-12 col-xs-12">
                    <h4 style="margin-bottom:15px;">写一篇文章,记录生活的点点滴滴!</h4>
                </div>
                <div class="col-md-12 col-xs-12">
                    <h4 style="margin-bottom:15px;">标题:<input class="form-control" type="text" id="caption"></h4>
                </div>
                <div class="col-md-12 col-xs-12">
                    <div id="summernote"></div>
                </div>
                <div class="col-md-12 col-xs-12">
                    <p><input type="button" class="btn btn-info" value="提交" id="ok"></p>
                </div>
            </div>
        </div>
    </div>
    <!-- end main container -->

	<!-- scripts for this page -->
    <script src="/assets/js/lib/jquery-1.11.1.min.js"></script>
    <script src="/assets/js/lib/bootstrap.min.js"></script>
    <script src="/assets/js/lib//fuelux.wizard.js"></script>
    <script src="/assets/js/summernote/summernote.min.js"></script>

    <script type="text/javascript">
        $(function () {
            var $wizard = $('#fuelux-wizard'),
                $btnPrev = $('.wizard-actions .btn-prev'),
                $btnNext = $('.wizard-actions .btn-next'),
                $btnFinish = $(".wizard-actions .btn-finish");

            $wizard.wizard().on('finished', function(e) {
                // wizard complete code
            }).on("changed", function(e) {
                var step = $wizard.wizard("selectedItem");
                // reset states
                $btnNext.removeAttr("disabled");
                $btnPrev.removeAttr("disabled");
                $btnNext.show();
                $btnFinish.hide();

                if (step.step === 1) {
                    $btnPrev.attr("disabled", "disabled");
                } else if (step.step === 4) {
                    $btnNext.hide();
                    $btnFinish.show();
                }
            });

            $btnPrev.on('click', function() {
                $wizard.wizard('previous');
            });
            $btnNext.on('click', function() {
                $wizard.wizard('next');
            });
            
            var $summernote = $('#summernote');

            $summernote.summernote({
                height: 300,                 // set editor height
                minHeight: null,             // set minimum height of editor
                maxHeight: null,             // set maximum height of editor
                focus: true,                 // set focus to editable area after initializing summernote
            });

            //点击提交按钮
            $("#ok").on("click",function(){
                var data = {
                	caption : $("#caption").val(),
                    content : $summernote.code(),
                    hello: "Hello, the world!"
                };
                console.log(data);
                $.ajax({url: "/article/push", type: "post", dataType: "json", data: data,success:function(res){
                		console.log(res);
                	if(res.result)
                		window.location = "article-list.html";
                	else
                		alert(res.resultInfo);
                }});
            });
        });
    </script>
</body>
</html>